<script lang="ts" setup>
import SearchBrand from "../components/search/SearchBrandComponent.vue";
import SearchResult from "../components/search/SearchResultComponent.vue";
import { ref, reactive, onMounted } from 'vue'
import {getSearch} from '../api/api'

const value = ref("")
const result = reactive({
    resultList:{
        brandBasicVOList:[],
        celebrityBasicDTOList:[],
        performanceVOList:[]
    }
})
const show = ref(false)
const playHistoryList = reactive({
    playHistory:[]
})

const getResultApi = async (key = value.value) => {
    let {data} = await getSearch(key)
    result.resultList = data
}

const setLocalHistory = (g = value.value) => {
    if(g.trim() !== ""){
        show.value = true
        value.value = g
        let valueSearch = g
        let searchHistory:string[] = JSON.parse(localStorage.searchHistory || '[]')
        searchHistory = [valueSearch, ...searchHistory.filter(k => k !== valueSearch)]
        localStorage.searchHistory = JSON.stringify(searchHistory)
        playHistoryList.playHistory = searchHistory as never[]
        getResultApi()
    }
}

const getLocalHistory = () => {
    playHistoryList.playHistory = JSON.parse(localStorage.searchHistory || '[]')
}

const delLocalHistory = (val:String) => {
    let searchHistory:string[] = JSON.parse(localStorage.searchHistory || '[]')
    searchHistory = searchHistory.filter(k => k !== val)
    localStorage.searchHistory = JSON.stringify(searchHistory)
    playHistoryList.playHistory = searchHistory as never[]
}

onMounted(() => {
    getLocalHistory()
})
</script>

<template>
    <div class="play-search-view">
        <div class="play-search-top">
            <div class="play-search-input">
                <img src="../assets/imgs/play/search1.png">
                <input type="text" placeholder="找明星、演出、场馆" v-model="value" @keyup.enter="setLocalHistory()" @click="show = false">
            </div>
            <div class="cancel-btn" @click="$router.go(-1)">取消</div>
        </div>
        <div class="play-search-wrapper">
            <div class="play-search-box">
                <div class="play-search-history-item" v-for="(g,i) in playHistoryList.playHistory" :key="i" v-show="!show">
                    <div class="history-item-left" @click="setLocalHistory(g)">
                        <img src="../assets/imgs/play/history.png">{{ g }}
                    </div>
                    <img src="../assets/imgs/play/del.png" @click="delLocalHistory(g)">
                </div>

                <div class="play-search-result" v-show="show">
                    <SearchBrand v-for="b in result.resultList.brandBasicVOList" :bList="b"/>
                    <SearchBrand v-for="c in result.resultList.celebrityBasicDTOList" :bList="c"/>

                    <div style="margin-top: 3vw;">
                        <SearchResult v-for="p in result.resultList.performanceVOList" :pList="p"/>
                    </div>

                    <div class="nothing" v-show="!result.resultList.brandBasicVOList&&!result.resultList.celebrityBasicDTOList&&!result.resultList.performanceVOList">
                        <img src="../assets/imgs/play/nothing.png">
                        <div>没找到您想要的内容</div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<style lang="scss" scoped>
.play-search-view{
    width: 100vw;
    height: 100vh;
    background-color: #f0f0f0;

    .play-search-top{
        width: 100vw;
        padding: 2vw 0;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: #ffffff;

        .play-search-input{
            display: flex;
            align-items: center;
            width: 80vw;
            padding: 1vw 3vw;
            box-sizing: border-box;
            border-radius: 4vw;
            background: #f5f5f5;
            
            img{
                width: 3.5vw;
                height: 3.5vw;
                vertical-align: middle;
                transform: translateY(-1px);
            }
            input{
                color: #333;
                width: 65vw;
                padding: 1vw 0;
                font-size: 14px;
                border: none;
                margin-left: 2vw;
                background: #f5f5f5;
            }
        }
        .cancel-btn{
            color: #f03d37;
        }
    }
    
    .play-search-wrapper{
        width: 100vw;
        overflow: hidden;

        .play-search-box{
            width: 102vw;
            max-height: 86vh;
            overflow: auto;

            .play-search-history-item{
                width: 100vw;
                padding: 0 4vw;
                box-sizing: border-box;
                height: 12vw;
                line-height: 12vw;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                background-color: #ffffff;
                border-bottom: 1px solid #e8e8e8;

                .history-item-left{
                    width: 85vw;
                    display: flex;
                    align-items: center;

                    img{
                        width: 3.7vw;
                        margin-right: 1vw;
                    }
                }
                img{
                    width: 3.7vw;
                }
            }
        }

        .play-search-result{

            .nothing{
                color: #999;
                line-height: 7vw;
                margin-top: 20vw;
                text-align: center;

                img{
                    width: 34vw;
                }
            }
        }
    }
    
}
</style>